<template>
    <div class="myinvest-container">
        <div class="myinvest-container-top">
        <Investments :userInvest="$store.state.userInvest" />
        <ul class="invest-tab-ul clearfix">
            <li
                    v-for="(item,index) in investtabItems"
                    :key="index" class="tab-li"
                    :class="{active: active===item.tabname}"
                    @click="changeTab(item.tabname)">
                {{item.name}}
                <i></i>
            </li>
        </ul>
        </div>
        <mt-tab-container v-model="active" swipeable="swipeable">
            <mt-tab-container-item id="tab-container1">
                <SYZLIST :syzlistData="$store.state.syzlist" :syzquery="$store.state.syzquery" :loding="loding" />
            </mt-tab-container-item>
            <mt-tab-container-item id="tab-container2">
                <TBZLIST :tbzlistData="$store.state.tbzlist" :tbzquery="$store.state.tbzquery" :loding="loding" />
            </mt-tab-container-item>
            <mt-tab-container-item id="tab-container3">
                <YJQLIST :yjqlistData="$store.state.yjqlist" :yjqquery="$store.state.yjqquery" :loding="loding" />
            </mt-tab-container-item>
        </mt-tab-container>
    </div>
</template>
<script>
    import axios from '~/plugins/axios'
    import Investments from '../../components/Investments'
    import SYZLIST from '../../components/invest/syz-list'
    import TBZLIST from '../../components/invest/tbz-list'
    import YJQLIST from '../../components/invest/yjq-list'
    import { Toast } from 'mint-ui'
    export default {
      middleware: 'auth',
      async asyncData ({ store, req }) {
        const datas = {
          isServer: process.server
        }
        if (process.server) {
          datas.serverReqCookie = req.headers.cookie
        }
        if (!store.state.userInvest.totalAsset) {
          console.log('axios api userinvest')
          const userInvestInfo = await axios.post('/api/getUserInvestInfo', datas)
          if (userInvestInfo && userInvestInfo.data && userInvestInfo.data.totalAsset) {
            store.commit('SET_USERINVEST', userInvestInfo.data)
          }
        }
      },
      head () {
        return {
          title: '我的出借'
        }
      },
      components: {
        Investments,
        SYZLIST,
        TBZLIST,
        YJQLIST
      },
      data () {
        return {
          swipeable: false,
          active: 'tab-container1',
          investtabItems: [
            {
              name: '收益中',
              tabname: 'tab-container1'
            },
            {
              name: '投标中',
              tabname: 'tab-container2'
            },
            {
              name: '已结清',
              tabname: 'tab-container3'
            }
          ],
          loding: false
        }
      },
      mounted () {
        if (!this.$store.state.syzquery) {
          var datas = {status: 'HKZ'}
          this.loding = true
          axios.post('/api/getuserinvestdetail', datas).then((resp) => {
            this.loding = false
            console.log(resp.data)
            if (resp && resp.data && resp.data.status === 0) {
              const datas = {
                status: 'HKZ',
                investList: resp.data.body.investItemList
              }
              this.$store.dispatch('setInvestList', datas)
            } else {
              Toast(resp.data.message || resp.data.responseMessage)
            }
          }).catch(errors => {
            this.loding = false
            Toast('接口异常')
          })
        }
      },
      watch: {
        // 如果 `active` 发生改变，这个函数就会运行
        active (newActive, oldActive) {
          this.changeTabList(newActive)
        }
      },
      methods: {
        changeTab (name) {
          if (this.loding) return false
          this.active = name
        },
        changeTabList (name) {
          if (name === 'tab-container2' && !this.$store.state.tbzquery) {
            this.loding = true
            var datas = {status: 'TBZ'}
            axios.post('/api/getuserinvestdetail', datas).then((resp) => {
              this.loding = false
              console.log(resp.data)
              if (resp && resp.data && resp.data.status === 0) {
                const datas = {
                  status: 'TBZ',
                  investList: resp.data.body.investItemList
                }
                this.$store.dispatch('setInvestList', datas)
              } else {
                Toast(resp.data.message || resp.data.responseMessage)
              }
            }).catch(errors => {
              this.loding = false
              alert(errors)
              Toast('接口异常')
            })
          } else if (name === 'tab-container3' && !this.$store.state.yjqquery) {
            this.loding = true
            var datas = {status: 'YJQ'}
            axios.post('/api/getuserinvestdetail', datas).then((resp) => {
              this.loding = false
              console.log(resp.data)
              if (resp && resp.data && resp.data.status === 0) {
                const datas = {
                  status: 'YJQ',
                  investList: resp.data.body.investItemList
                }
                this.$store.dispatch('setInvestList', datas)
              } else {
                Toast(resp.data.message || resp.data.responseMessage)
              }
            }).catch(errors => {
              this.loding = false
              Toast('接口异常')
            })
          }
        }
      }
    }
</script>
<style scoped lang="sass">
.myinvest-container
    padding-top: 12.8rem
    .myinvest-container-top
        position: fixed
        width: 100%
        top: 0
        z-index: 99
        background: #F8F8F8
        .invest-tab-ul
            padding: 0 0.75rem 0.25rem
            background: #ffffff
            margin-top: 0.5rem
            border-bottom: 1px solid #EFEFEF
            .tab-li
                width: 33.33%
                height: 2.25rem
                line-height: 2.25rem
                text-align: center
                position: relative
                float: left
                font-size: 0.7rem
                color: #666666
                &>i
                    position: absolute
                    width: 15px
                    height: 2px
                    display: block
                    bottom: 0
                    left: 50%
                    margin-left: -7.5px
                &.active
                    color: #4C87FC
                    &>i
                        background: #4C87FC
</style>